<template>
    <div class="edit">
        <div class="container">
            <h2 style='font-weight:bold;margin:30px 0;'>修改登录密码</h2>
            <div class="main">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
                    <!-- 登录账号 -->
                    <FormItem prop="userName" label='登录账号：'>
                        <Input v-model.trim="formValidate.userName" placeholder="请输入登录账号" style="width: 500px" autocomplete="off"  id='userName' @on-keyup="formValidate.userName = formValidate.userName.replace(/[^\w_]/g,'');" maxlength="64"/>
                    </FormItem>
                    <FormItem prop="userName" label='旧密码：'>
                        <Input v-model.trim="formValidate.oldPwd" placeholder="请输入旧密码" style="width: 500px;border-radius:5px;" type="password" autocomplete="new-password"></Input>
                    </FormItem>
                    <!-- 更改密码 -->
                    <FormItem  v-if="flag" prop="passWord"  label='新密码：'>
                        <Input v-model.trim="formValidate.passWord" :placeholder="tip" style="width: 500px;border-radius:5px;" type="password" autocomplete="new-password"></Input>
                        <img src="../../assets/images/open.png" @click="handlePassword" alt="" class="eye">
                    </FormItem>
                    <FormItem v-if="!flag" prop="passWord"  label='新密码：'>
                        <Input v-model.trim="formValidate.passWord" :placeholder="tip" style="width: 500px;border-radius:5px;" type="text" autocomplete="new-password"></Input>
                        <img src="../../assets/images/close.png" @click="handlePassword" alt="" class="eye">
                    </FormItem>
                    <!-- 保存 -->
                    <FormItem style="width:550px;text-align:center;">
                        <Button type="primary" @click="save('formValidate')">确定修改</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import code from "@/configs/base.js";
import cookie from "../../utils/cookie.js";
import aesUtils from "../../plugins/aes-utils.js";
export default {
  data() {
    cookie.getCookie("levelp")
    const validatePassword = (rule, value, callback) => {
         if (value === '') {
            callback(new Error('请输入新密码'));
         } else {
              //6-20位包含字符、数字和特殊字符
              var ls = 0;
          if (this.formValidate.passWord !== '') {
              if(this.formValidate.passWord.match(/([a-z])+/)){
                ls++;
              }
              if(this.formValidate.passWord.match(/([0-9])+/)){
                ls++;
              }
              if(this.formValidate.passWord.match(/([A-Z])+/)){
                ls++;
              }
              if(this.formValidate.passWord.match(/([\W])+/) && !this.formValidate.passWord.match(/(![\u4E00-\u9FA5])+/)){  
                ls++;
              }
              if(this.formValidate.passWord.length<8 || this.formValidate.passWord.length>16 ){
                  callback(new Error('要求8-16位字符'));
                  ls=0;
              }
              if(this.formValidate.passWord.match(/([\u4E00-\u9FA5])+/)){
                  callback(new Error('不能包含中文字符'));
                  ls=0;
              }
            console.log('密码等级',this.password_level)
            if(cookie.getCookie("levelp") ==1){
                  switch (ls) {
                      case 0: this.passwordPercent = 0;callback(new Error('请设置登录密码(密码需8-16位)'));break;
                      case 3:
                      case 4: this.passwordPercent = 100;break;
                      default: this.passwordPercent = 0;break;
                  }
            }else if(cookie.getCookie("levelp") == 2){
                switch (ls) {
                  case 0: this.passwordPercent = 0;callback(new Error('密码需8-16位,包含字母和数字或特殊符号'));break;
                  case 1: this.passwordPercent = 33;callback(new Error('密码需8-16位,包含大小字母和数字或特殊符号'));break;
                  case 3:
                  case 4: this.passwordPercent = 100;break;
                  default: this.passwordPercent = 0;break;
              }
            }else{
                switch (ls) {
                  case 2: this.passwordPercent = 66;callback(new Error('密码需8-16位,包含大小字母和数字或特殊符号'));break;
                  case 3:
                  case 4: this.passwordPercent = 100;break;
                  default: this.passwordPercent = 0;break;
              }
            }
          }
          callback();
     }
    };
    return {
        flag: true,
        leng:true,
        changer:0,
        passwordPercent:0,
        tip:'',
        formValidate:{
            userName:"",
            passWord:"",
            oldPwd:"",
        },
        // 验证条件
        ruleValidate:{
            userName:[
                {
                    // 是否校验
                    required: true,
                    // 提示文字
                    message: "请输入登录账号",
                    // 触发事件
                    trigger: "change"
                }
            ],
            // 登录密码
            passWord:[
                {
                    // 是否校验
                    required: false,
                    // 提示文字
                    validator: validatePassword,
                    // 触发事件
                    trigger: "blur",
                }
            ],
            oldPwd:[
                {
                    // 是否校验
                    required: false,
                    // 提示文字
                    message: "请输入旧密码",
                    // 触发事件
                    trigger: "blur",
                }
            ],
        },
        switch1: true,
        // 账号
        text: "",
        // 密码
        passWord: "",
        // 姓名
        name: "",
        // 手机号码
        phone: "",
        // 昵称
        niceName: "",
        password_level:3,
        key:"",
    };
    },
    mounted(){
        let a = this.$store.state.loginkeytemp
        this.key = this.deletekey(a)
    },
    created(){
        if(cookie.getCookie("levelp") == 1){
            this.tip = "请设置登录密码(密码需8-16位)"
        }else if(cookie.getCookie("levelp") == 2){
            this.tip = "请设置登录密码(密码需8-16位,包含字母和数字或特殊符号)"
        }else{
            this.tip = "请设置登录密码(密码需8-16位,包含大小字母和数字或特殊符号)"
        }
    },
    methods: {
        handlePassword(){
            this.flag = !this.flag
        },
        save(name){
            console.log(this.formValidate.userName.trim(), this.formValidate.passWord.trim(),this.formValidate.oldPwd.trim())
            this.$refs[name].validate(valid => {
                if (valid) {
                    // 必填项填写完成
                    let params = {
                        // 账号
                        userName: this.formValidate.userName.trim(),
                        //新密码
                        newPwd: this.formValidate.passWord.trim(),
                        //旧密码
                        oldPwd: this.formValidate.oldPwd.trim(),
                    };
                    let logcaldata = true
                    let body = {version: '2',uri:api.updateOperatePwd,method:"POST",body:params}
                    body = aesUtils.encrypt(this.$store.state.salt, this.$store.state.iv, this.key,JSON.stringify(body))
                    console.log(body)
                    this.$axios.post("/api",{'data':body,'logcaldata':logcaldata}).then(res => {
                    // 修改用户数据
                    // this.$axios.post(api.updateOperatePwd, params).then(res => {
                        if(res.data.code == 1) {
                            this.$Message.info(res.data.message);
                            setTimeout(() => {
                                // 公用方法
                                this.functionJS.queryNavgationTo(this,"/login");
                            }, 800);
                        }else if(res.data.code == 0){
                            this.$Message.info(res.data.message);
                        }else if(res.data.code == -2){
                            this.$Message.info(res.data.message);
                        }
                    });
                }else {
                    // 必填项填写失败
                    this.$Message.error("请检查必填荐是否填写完整！");
                }
            })
        }
    }
};
</script>
<style lang="less" scoped>
    .eye{
        width: 22px;
        height: 22px;
        margin: 0 0 0 -32px;
        position: relative;
        z-index: 9999;
    }
    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        margin-right: 4px;
    }
    // 关闭input文本框自动填充背景色黄色
    input:-webkit-autofill {
        box-shadow: 0 0 0px 1000px white inset !important;
    }
    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }
    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .w-select {
        width: 120px;
    }
    .w-select-hos {
        width: 130px;
    }
    .w-select-identity {
        width: 150px;
    }
    .edit {
        width: 100%;
        height: 100%;
        position: absolute;
        .container {
            width: 90%;
            margin: 0 auto;
            .main {
                width: 45%;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
            }
        }
    }
</style>

